/*
 * @Author: wangjq4214
 * @Date: 2022-05-07 16:16:22
 * @LastEditTime: 2022-05-08 17:28:57
 * @LastEditors: wangjq4214
 */
import { Message, Modal, Select, Space } from '@arco-design/web-react';
import { selectIDAtom, visibleAtom } from '../model';
import { post } from '@/apis';
import { COMPUTE_SCALE_URL } from '@/apis/compute';

const ScaleModal = () => {
  const [visible, setVisible] = useAtom(visibleAtom);
  // const { data } = useAtomValue(nodeListAtom);
  const selectID = useAtomValue(selectIDAtom);

  const [modalState, setModalState] = useState<{
    node?: string;
    size?: number;
  }>({});

  // const handleNodeChange = (value: string) => {
  //   setModalState((s) => ({ ...s, node: value }));
  // };

  const handleSizeChange = (value: number) => {
    setModalState((s) => ({ ...s, size: value }));
  };

  return (
    <Modal
      title="选择进行迁移的节点"
      visible={visible}
      onOk={() => {
        post(COMPUTE_SCALE_URL, {
          service_id: selectID,
          // node_id: modalState.node,
          compute_scale: modalState.size,
        })
          .then(() => {
            Message.success('集群配置成功');
          })
          .finally(() => {
            setModalState({});
            setVisible(false);
          });
      }}
      onCancel={() => {
        setVisible(false);
      }}
    >
      <div className="flex justify-center">
        <Space direction="vertical" className="w-7/10">
          {/* <Select
            placeholder="请选择服务节点"
            value={modalState.node}
            onChange={handleNodeChange}
          >
            {data?.Nodelist.map((item) => {
              return (
                <Select.Option key={item.id} value={item.Hostname}>
                  {item.Hostname}
                </Select.Option>
              );
            })}
          </Select> */}
          <Select
            placeholder="请选择新节点大小"
            value={modalState.size}
            onChange={handleSizeChange}
          >
            <Select.Option value={1}>小</Select.Option>
            <Select.Option value={2}>中</Select.Option>
            <Select.Option value={3}>大</Select.Option>
          </Select>
        </Space>
      </div>
    </Modal>
  );
};

export default ScaleModal;
